<template>
  <el-dialog
    append-to-body
    :title="info+'-商品分类'"
    :visible.sync="dialogVisible"
    align="left"
    v-loading="currLoading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    width="800px">
    <el-form ref="form" :model="form" label-width="200px" :rules="rules">
      <el-form-item label="搜索分类" align="left" v-if="!isUpdate">
        <div>
          <el-input v-model="searchKeywords" style="width: 200px" placeholder="请输入 搜索分类名称"></el-input> <el-button type="primary" @click="searchProductClassify">搜索</el-button>
        </div>
        <div v-if="searchList.length>0">
          <el-select v-model="form.pid" placeholder="选择搜索结果">
            <el-option
              v-for="item in searchList"
              :key="item.id"
              :label="item.pathName"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="分类名称" align="left" prop="name">
        <el-input v-model="form.name" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="分类排序" align="left" prop="sort">
        <el-input v-model="form.sort" style="width: 200px"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'CreateProductClassifyDialog',
  components: {},
  props:{
    successFunction:Function
  },
  data: function () {
    return {
      info:'创建',
      isUpdate:false,
      dialogVisible: false,
      currLoading: false,
      searchKeywords:'',
      searchList:[
        {
          "id": 1,
          "name": "建材五金",
          "rootName": "建材五金",
          "pid": 0,
          "path": "0-1",
          "pathArr": [
            {
              "name": "建材五金",
              "pid": 0,
              "id": 1
            }
          ],
          "pathName": "建材五金"
        }
      ],
      parent:{
        id:1,
        pid:'',
        name:'',
        pathArr:[
          '生活用品','烟酒'
        ],
      },
      form: {
        id:0,
        pid:'',
        name: '',
        sort: 0,
      },
      rules: {
        name: [
          {required: true, message: '请输入 分类名称', trigger: ['blur', 'change']},
        ],
        sort: [
          {required: true, message: '请上传 分类排序', trigger: ['blur', 'change']},
        ]
      }
    }
  },
  watch:{
    dialogVisible:function () {
      if (!this.dialogVisible){
        this.form={
          id:0,
          name: '',
          sort: 0,
          pid: 0,
        }
      }
    }
  },
  mounted () {
  },
  methods: {
    searchProductClassify:function () {
      let $this=this
      $this.currLoading = true
      $this.form.pid=''
      $this.searchList=[]
      $this.MyRequest(this.ApiDoNameShop + 'getAllProductClassify', {name:this.searchKeywords,level:2}, function (data) {
        $this.currLoading = false
        if (data.list.length>0){
          var list=[]
          data.list.forEach(function (value, index) {
            if (value.level<=2){
              list.push(value)
            }
          })
          $this.searchList=list
          $this.form.pid=list[0].id
        }else{
          $this.form.pid=''
        }
        $this.$forceUpdate()
      }, function () {
        $this.$message.success('操作失败，请重试')
        $this.currLoading = false
        $this.$forceUpdate()
      })
    },
    open: function (infoData,isAddSon) {
      this.searchList=[]
      this.info='创建'
      if (!isAddSon){
        if (infoData.id) {
          this.info='更新'
          this.isUpdate=true
          this.form.id = infoData.id
          this.form.pid = infoData.pid
          this.form.name = infoData.name
          this.form.sort = infoData.sort
        }else{
          this.isUpdate=false
          this.form={
            id:0,
            name: '',
            sort: 0,
            pid: '',
          }
          if (this.$refs.form){
            this.$refs.form.resetFields()
          }
        }
      }else{
        // console.log('infoData',infoData)
        if (infoData.id){
          this.form.pid=infoData.id
          this.searchList=[infoData]
        }
      }
      this.dialogVisible = true
      this.$forceUpdate()
    },
    submit: function () {
      let $this = this
      $this.$refs.form.validate((valid) => {
        if (valid) {
          var api = 'Product/createClassify'
          if (this.isUpdate) {
            api = 'Product/updateClassify'
          }else{
            delete $this.form.id
          }
          if (!$this.form.pid){
            $this.form.pid=0
          }
          $this.currLoading = true
          $this.MyRequest(this.ApiDoNameShop + api, $this.form, function () {
            $this.$message.success($this.info+'成功')
            $this.currLoading = false
            $this.dialogVisible=false
            $this.$props.successFunction()
            $this.$forceUpdate()
          }, function () {
            $this.$message.success('操作失败，请重试')
            $this.currLoading = false
            $this.$forceUpdate()
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
  .parent-classify-name{ line-height: 20px; display: inline-block;}
  .parent-classify-name>span.name{ padding: 2px 5px; background: #ea610b; color: #FFFFFF; display: inline-block; margin-left: 3px; border-radius: 3px;}
  .parent-classify-name>span.icon{ padding-left: 5px}
</style>
